import React, { Suspense} from 'react'
import { Router,Switch,Route,Redirect} from "react-router-dom";
// import Home from "pages/Layout/Home";
// import Login from "pages/Login/Login";
// import NotFount from "pages/NotFound/NotFount";
import AuthRoute from "components/AuthRoute/AuthRoute";
import history from "utils/history";

import 'antd/dist/antd.min.css';
import style from './app.module.scss'
// import { hasToken } from "utils/storage";

// 组件
const Home = React.lazy(()=>import('pages/Layout/Home.js'))
const Login = React.lazy(()=>import('pages/Login/Login.js'))
const NotFount = React.lazy(()=>import('pages/NotFound/NotFount.js'))

function App() {
  return (
    <Router history={history}> 
      <div className={style.app}>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Redirect exact from="/" to='/home'></Redirect>
            <AuthRoute path='/home' component={Home}></AuthRoute>
            {/* 非封装下的导航守卫 */}
            {/* <Route path='/home' render={(RouteProps)=>{
              console.log(hasToken())
              if(hasToken()) {
                return <Home {...RouteProps}/>
              } else {
                return <Redirect to='/login'/>
              }
            }}></Route> */}
            <Route path='/login' component={Login}></Route>
            <Route path='*' component={NotFount}></Route>
          </Switch>
        </Suspense>
      </div>
    </Router>
  );
}

export default App;
